<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
	<script src="js/rem.js"></script>
</head>
<body>
	<audio id="audio" src="js/music.mp3" autoplay></audio>
	<div class="music addMus">
		<div class='zeo'>♪</div>
		<div class='one'>♪</div>
		<div class='two'>♪</div>
		<div class='thre'>♪</div>
	</div>
	<div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide  first">
	            	<div class="first1">
	            		<img class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="images/1.png"/>
	            	</div>
	            	<div class="first2">
	            		<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/2.png"/>
	            	</div>
	            	<div class="first3">
	            		<img class="ani" swiper-animate-effect="shake" swiper-animate-duration="1s" swiper-animate-delay="0.8s" src="images/3.png"/>
	            	</div>
	            	<div class="first4">
	            		<img class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1s" src="images/4.png"/>
	            	</div>
	            	<div class="first5"> 
	            		<img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.2s" src="images/5.png"/>
	            	</div>
	            	<div class="first6">
	            		<img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" src="images/6.png"/>
	            	</div>
	            	<div class="first7">
	            		<img src="images/7.png"/>
	            	</div>
					<div class="arrow">
						<img src="images/19.png">
					</div>
	            </div>
	            <div class="swiper-slide sec">
	            	<div class="sec1">
	            		<img class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="images/8.png"/>
	            	</div>
	            	<div class="sec2">
	            		<img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="images/9.png"/>
	            	</div>
	            	<div class="sec3">
	            		<img class="ani" swiper-animate-effect="flash" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s" src="images/10.png"/>
	            	</div>
	            	<div class="sec4">
	            		<img class="ani" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="1s" src="images/11.png"/>
	            	</div>
	            	<div class="sec5">
	            		<img  class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s" src="images/12.png"/>
	            	</div>
	            	<div class="sec6">
	            		<img  src="images/7.png"/>
	            	</div>
	            	<div class="arrow">
						<img src="images/19.png">
					</div>
	            </div>
	            <div class="swiper-slide thr">
	            	<div class="thr1">
	            		<img class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="images/14.png"/>
	            	</div>
	            	<div class="thr2">
	            		<img class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.7s" swiper-animate-delay="0.5" src="images/15.png"/>
	            	</div>
	            	<div class="thr3">
	            		<img class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="1s" src="images/16.png"/>
	            	</div>
	            	<div class="thr4">
	            		<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.3s" src="images/18.png"/>
	            	</div>
	            	<div class="thr5">
	            		<img class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s" src="images/7.png"/>
	            	</div>
	            	<div class="zf1">
	            		
	            		<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s">圣诞节快乐呀😃，倩倩<br>超级爱你呢&#128149;！！！</p>
	            		
	            	</div>
	            	<div class="zf2">
	            		<span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2s">—森森</span>
	            	</div>
	            	<div class="arrow">
						<img src="images/19.png">
					</div>
	            </div>          
	        </div>
	        <div class="swiper-pagination"></div>
	        <div id="swiper-pagination"></div>
	    </div>
</body>
	<script src="js/zepto.js"></script>
	<script src="js/swiper-3.3.1.min.js"></script>
	<script src="js/swiper.animate1.0.2.min.js"></script>
	<script type="text/javascript">
		  var mySwiper = new Swiper ('.swiper-container', {
		  	pagination: '.swiper-pagination',
	        paginationClickable: true,
	        direction: 'vertical',
	        loop:true,
		  	autoplayDisableOnInteraction:false,
		  	grabCursor:true,
			  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			    swiperAnimateCache(swiper); //隐藏动画元素 
			    swiperAnimate(swiper); //初始化完成开始动画
			  }, 
			  onSlideChangeEnd: function(swiper){ 
			    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			  } 
 		 }) 
 		  $(".music").click(function(){
	    	if(audio.paused){
	    		audio.play();
	    		$(".music").addClass("addMus");
	    		$(".music div").eq(0).siblings().show();
	    	}else{
	    		audio.pause();
	    		$(".music").removeClass("addMus");
	    		$(".music div").eq(0).siblings().hide();
	    	}
	    })
 		  
	</script>

</html>